<template>

    <div class="M_category">
        <div class="view_table">
            <el-button type="primary" class="btn_addcate" @click="addCategory">添加分类</el-button>
            <el-table style="width: 100%;height:90%;border-radius: 0.4rem;box-shadow: 0 0 5px rgba(0, 0, 0, .15);"
                :data="categoryData" stripe size="large">
                <el-table-column fixed label="分类名称" prop="categoryname" min-width="5rem" style="padding-left: 1rem;">
                </el-table-column>
                <el-table-column fixed label="创建时间" prop="CreatedAt" min-width="5rem">
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="3rem">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="editItem(scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="deleteItem(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>
    
    <el-dialog v-model="dialogAdd" title="请输入添加分类名称"  >
        <el-input v-model="dialogAdd_input" placeholder="Please input" />
        <el-button type="primary" style="position:relative;left: 0;top: 1rem;" @click="add">确定</el-button>
    </el-dialog>        
    



</template>

<!------------------------------>
<script setup lang="ts">

const global=getCurrentInstance()


//Flag:数据显示
type cateList ={
    categoryname:string
}
let categoryData = ref<cateList[]>([])
async function GetData() { 
    // API:数据查询
    const res = await global?.proxy?.$axios.get('/v1/getcategories')
    categoryData.value = res?.data.data.map((item: any) => {
        item.CreatedAt = (item.CreatedAt as string).split("T").at(0)
        return item
    })
};GetData()



//Flag:分类添加行为:只有超级管理员才能执行此操作
let dialogAdd = ref<boolean>(false)
let dialogAdd_input = ref<string>('')

const addCategory = () => {
    dialogAdd.value=true
}
const add = () => {
    //API:增加
    global?.proxy?.$axios.post('/v1/addcategory', {
        categoryname:dialogAdd_input.value
    }).then((res) => {
        if (res.data.status==200)
        ElMessage.success({
            center: true,
            message:'成功'
        })
    }).finally(() => {
        dialogAdd.value = false
        dialogAdd_input.value = ''
        GetData()
    })
}

//Flag:编辑分类行为
const editItem = (scope: any) => {
    ElMessageBox.prompt(
        '请输入更新后的名称',
        'Info',
        {
            center: true,
            inputValue: scope.categoryname,
            cancelButtonText: '取消',
            confirmButtonText:'确定'
        }
    ).then(({ value }) => {
        //API:编辑
        global?.proxy?.$axios.put('/v1/editcatrgory', {
            oldname: scope.categoryname,
            newname:value
        }).then((res) => {
            if (res?.data.status == 200) {
                ElMessage.success({ message: '编辑成功', center: true })
                GetData()
            }
        })
    })
}

//Flag:删除分类行为
const deleteItem = (scope: any) => {
    ElMessageBox.confirm(
        '是否确认删除？',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center:true
        }
    ).then(async () => {
        // API：删除
        const rep = await global?.proxy?.$axios.delete(`/v1/deletecategory`,
            //Note:axios的body数据存储在{data中}
            {data:{
            ID: scope.ID,
            categoryname: scope.categoryname
        }}
        )
        if (rep?.data?.status == 200) { 
            ElMessage.success({ message: '删除成功', center: true })
            GetData()
        }
    }, () => {})

}
</script>

<!------------------------------>

<style scoped lang="scss">



.btn_addcate{
    margin-bottom: 1rem;
}


</style>